<template>
  <div class="ivz-basic-list" @click="activeHandle('basic')">
    <div class="ivz-ibs-search" @click.stop="activeHandle('basic')">
      <ivz-basic-search />
    </div>
    <div class="ivz-ibt-table" @click.stop="activeHandle('table')">
      <ivz-basic-table />
    </div>
  </div>
</template>

<script>
import IvzBasicSearch from "@/components/search/IvzBasicSearch.vue";
import {mapGetters, mapMutations} from "vuex";
import IvzBasicTable from "@/components/table/IvzBasicTable.vue";
import {ComponentType, PathSort} from "@/store/consts";
import {EventBus, EventType, MetaEventType, MountedEventType} from "@/event";
import {searchLayoutMetas, tableMetas} from "@/metas/ComponentMetas";

const BasicListTabMetas = {
  basic: {label: '搜索栏配置', metas: [...searchLayoutMetas]},
  table: {label: '表格配置', metas: [...tableMetas]}
}
export default {
  name: "IvzBasicList",
  components: {IvzBasicTable, IvzBasicSearch},
  computed: {
    ...mapGetters({
      meta: 'listMeta',
      model: 'listTabModel'
    })
  },
  created() {
    this.setListTabMetas(BasicListTabMetas);

    this.switchPathTo({type: ComponentType
          .List, name: '默认列表', sort: PathSort.List})

    this.activeHandle();

    EventBus.listener(MetaEventType.path, path => {
      if(path.type == ComponentType.List) {
        this.activeHandle();
      }
    })
  },
  mounted() {
    EventBus.publish(MountedEventType.list, this.meta);
  },
  methods: {
    ...mapMutations(['switchPathTo', 'switchActiveMetaTo', 'setListTabMetas', 'activeClass']),
    activeHandle(tab) {
      this.meta['activePane'] = tab;
      this.switchActiveMetaTo(this.meta);
    },
  }
}
</script>

<style scoped>
.ivz-basic-list {
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 6px 8px;
  position: absolute;
}
.ivz-ibt-table {
  margin-top: 28px;
}
.ivz-ibs-search {
  margin: 8px 0px;
  border-radius: 3px;
  border: 1px solid #e8e8e8;
  /*box-shadow: 0px 0px 0px 1px #e8e8e8;*/
}
</style>
